import React, { useState, useMemo, useEffect, ChangeEvent } from 'react'
import { PageProps } from "@/interfaces/app.interface"
import { register, sendCode } from '@/api'
import ls from '@/utils/ls.func'
import style from './index.less'
import areas from './area'
import { Checkbox, Cascader, message } from 'antd';
import { regxSPhone, regxEmail, regxPass2 } from '@/utils/regexp.func'

const registerPage = (prop: any) => {
    let [errmsg, setErrmsg] = useState('')
    let [user, setUser] = useState('')
    let [email, setEmail] = useState('')
    let [unit, setUnit] = useState('')
    let [area, setArea] = useState([])
    let [tel, setTel] = useState('')
    let [pass, setPass] = useState('')
    let [code, setCode] = useState('')
    let [sendmsg, setSendmsg] = useState('发送验证码')
    let [check, setCheck] = useState(false)
    let [issend, setIssend] = useState(false)
    let [type, setType] = useState('')

    useEffect(() => {
        (window as any).app.classList.add('cls')
        return () => {
            (window as any).app.classList.remove('cls')
        }
    }, [])


    const blur = (type: string) => (e: ChangeEvent<HTMLInputElement>) => {
        let { value } = e.target
        switch (type) {
            case 'user':  // 姓名

                break;
            case 'email': // 邮箱
                if (!regxEmail.test(value)) {
                    setErrmsg('请输入正确的邮箱')
                    setType('email')
                }
                break;
            case 'unit': // 单位信息

                break;
            case 'tel': //手机号
                if (!regxSPhone.test(value)) {
                    setErrmsg('请输入正确的手机号')
                    setType('tel')
                }
                break;
            case 'pass': // 密码
                if (!regxPass2.test(value)) {
                    setErrmsg('密码格式不正确')
                    setType('pass')
                }
                break;
            case 'code': // 验证码

                break;
        }
    }

    const change = (type: string) => (e: ChangeEvent<HTMLInputElement>) => {
        let { value } = e.target
        switch (type) {
            case 'user':
                setUser(value);
                break;
            case 'email':
                setEmail(value);
                break;
            case 'unit':
                setUnit(value)
                break;
            case 'tel':
                setTel(value);
                break;
            case 'pass':
                setPass(value);
                break;
            case 'code':
                setCode(value)
                break;
        }
        if (type) setType('')
    }

    let mark = useMemo(() => {
        return user && email && unit && area.length && tel && pass && code && check && !type
    }, [user, email, unit, area, tel, pass, code, check, type])
    // 发送验证码
    const send = () => {
        if (issend) return
        if (!tel || !regxSPhone.test(tel)) {
            setErrmsg('请输入正确的手机号')
            setType('tel')
            return
        }
        setIssend(true)
        sendCode({ mobile: tel, type: 0 }).catch(err => {
            setErrmsg(err)
            setType('user')
        })
        let time = 60
        setSendmsg(`正在发送中 ${time} s`)
        let timer = setInterval(() => {
            if (time > 1) {
                time--;
                setSendmsg(`正在发送中 ${time} s`)
            } else {
                clearInterval(timer);
                setSendmsg(`发送验证码`)
                setIssend(false)
            }
        }, 1000);
    }
    // 注册
    const submit = () => {
        if (mark) {
            let provinceName = ''
            let cityName = ''
            let areaName = ''
            areas.forEach(item => {
                if (item.code === area[0]) {
                    provinceName = item.name
                    item.children.forEach(val => {
                        if (val.code === area[1]) {
                            cityName = val.name
                            val.children.forEach(v => {
                                if (v.code === area[2]) {
                                    areaName = v.name
                                }
                            })
                        }
                    })
                }
            })
            let json = {
                mobile: tel,
                name: user,
                email,
                company: unit,
                province: area[0],
                provinceName,
                city: area[1],
                cityName,
                area: area[2],
                areaName,
                passWord: pass,
                verificationCode: code,
                source: 1,
                hallId: 1
            }
            register(json).then(res => {
                message.success('注册成功');
                ls.setItem('user', res)
                prop.cb('success')
            })
        }

    }

    return <div className={style.contain}>

        <div className={style.register}>
        <div className={style.cls} onClick={()=>prop.cb('')}>&times;</div>
            <div className={style.form}>
                <div className={`flex ${style.item}`}>
                    <div className={style.label}></div>
                    <div className={`flex-start ${style.error}`} hidden={!(type)}>
                        <img src={require('@/assets/img/warn.png')} alt="" />
                        <div>{errmsg}</div>
                    </div>
                </div>

                <div className={`flex ${style.item}`}>
                    <div className={style.label}>姓名</div>
                    <div className={style.input}>
                        <input type="text" maxLength={7} placeholder="设置后不可更改，最大长度为7" className={type == 'user' ? style.err : ''} onChange={change('user')} onBlur={blur('user')} />
                    </div>
                </div>

                <div className={`flex ${style.item}`}>
                    <div className={style.label}>邮箱</div>
                    <div className={style.input}>
                        <input type="text" placeholder="邮箱" className={type == 'email' ? style.err : ''} onChange={change('email')} onBlur={blur('email')} />
                    </div>
                </div>

                <div className={`flex ${style.item}`}>
                    <div className={style.label}>单位信息</div>
                    <div className={style.input}>
                        <input type="text" maxLength={20} onChange={change('unit')} placeholder="单位信息" />
                    </div>
                </div>

                <div className={`flex ${style.item}`}>
                    <div className={style.label}>所在区域</div>
                    <div className={style.input}>
                        <Cascader className={style.cas} placeholder="所在区域" expandTrigger="hover" options={areas} fieldNames={{ label: 'name', value: 'code' }} onChange={setArea} />
                    </div>
                </div>

                <div className={`flex ${style.item}`}>
                    <div className={style.label}>手机号</div>
                    <div className={style.input}>
                        <input type="text" maxLength={11} className={type == 'tel' ? style.err : ''} placeholder="可用于登录和找回密码" onChange={change('tel')} onBlur={blur('tel')} />
                    </div>
                </div>

                <div className={`flex ${style.item}`}>
                    <div className={style.label}>密码</div>
                    <div className={style.input}>
                        <input type="password" maxLength={14} className={type == 'pass' ? style.err : ''} placeholder="长度8-14个字符/字母/数字/特殊符号，至少包含2种" onChange={change('pass')} onBlur={blur('pass')} />
                    </div>
                </div>

                <div className={`flex ${style.item}`}>
                    <div className={style.label}>验证码</div>
                    <div className={`${style.input} flex`}>
                        <input type="text" maxLength={6} className={style.code} placeholder="验证码" onChange={change('code')} onBlur={blur('code')} />
                        <div className={`${style.send} ${issend ? style.none : ''}`} onClick={send}>{sendmsg}</div>
                    </div>
                </div>

                <div className={`flex ${style.item}`}>
                    <div className={style.label}></div>
                    <div className={`${style.input}  flex-start`}>
                        <Checkbox onChange={e => setCheck(e.target.checked)}></Checkbox>
                        <div className={style.rule}>我已阅读并接受 <span>用户协议</span> 和 <span>版权规则</span></div>
                    </div>
                </div>

                <div className={`flex ${style.item}`}>
                    <div className={style.label}></div>
                    <div className={`${style.submit} ${mark ? style.on : ''} `} onClick={submit}>注册</div>
                </div>
            </div>
        </div>
    </div>
}

export default registerPage